<template>
  <div>
    <el-button type="primary" @click="cateLog = true">添加大类</el-button>
    <el-button type="primary" @click="goodLog = true">添加商品</el-button>
    <el-table
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="title" label="商品名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="price" label="商品价格" sortable width="180">
      </el-table-column>
      <el-table-column prop="desc" label="商品描述"> </el-table-column>
    </el-table>

    <el-dialog title="添加大类" :visible.sync="cateLog">
      <el-form :model="form">
        <el-form-item label="请输入大类">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cateLog = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加商品" :visible.sync="goodLog">
      <el-form :model="good">
        <el-form-item label="分类">
          <el-radio-group v-model="good.cateid">
            <el-radio v-for="item in list" :key="item.id" :label="item.id">{{
              item.title
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="good.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="good.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" :label-width="formLabelWidth">
          <el-input v-model="good.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodLog = false">取 消</el-button>
        <el-button type="primary" @click="addGood">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelWidth: "80px",
      list: JSON.parse(localStorage.getItem("list")) || [
        {
          id: 1,
          title: "衣服",
          children: [
            {
              id: 11,
              title: "羽绒服",
              price: 2000,
              desc: "羽绒服很暖和",
            },
            {
              id: 12,
              title: "佩洛西",
              price: -20,
              desc: "82还作妖",
            },
          ],
        },
        {
          id: 2,
          title: "电子产品",
          children: [
            {
              id: 21,
              title: "羽绒服111",
              price: 2000,
              desc: "羽绒服很暖和222",
            },
            {
              id: 22,
              title: "佩洛西111",
              price: -20,
              desc: "82还作妖222",
            },
          ],
        },
      ],
      //列表初始数据
      cateLog: false,
      //大类的弹框
      form: {
        title: "",
      },
      //添加大类的表单
      goodLog: false,
      good: {
        title: "",
        cateid: "",
        price: "",
        desc: "",
      },
    };
  },
  methods: {
    addCate() {
      let res = this.list.filter((i) => i.title == this.form.title);
      if (res.length != 0) {
        this.$message({
          message: "警告哦，这个分类已经存在了",
          type: "warning",
        });
        return false;
      }
      //判重
      this.list.push({
        id: new Date().getTime(),
        //用时间戳当id 永远都不会重复
        title: this.form.title,
        children: [],
      });
      this.setStorage();
      this.cateLog = false;
      this.form.title = "";
    },
    //添加大类
    addGood() {
      this.list.forEach((item) => {
        if (item.id == this.good.cateid) {
          item.children.push({
            ...this.good,
            id: new Date().getTime(),
          });
        }
      });
      this.setStorage();
      //存本地存储
      this.goodLog = false;
      this.good = {
        title: "",
        cateid: "",
        price: "",
        desc: "",
      };
    }, //添加商品
    setStorage() {
      localStorage.setItem("list", JSON.stringify(this.list));
    },
    //存本地存储
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped></style>
